<template>
	<view class='w-full'>
		<view :class="SZR_class" style="z-index: 99999999">
		</view>
	</view>
</template>

<script>
	let that;
	//AI赛诸葛实例

	/**
	 * 创建AI赛诸葛实例
	 *
	 * @param options 配置参数
	 * @param options.autoShow 是否自动显示，默认为true
	 * @param options.deviceId 设备ID，默认从DOM中获取或查询参数中获取
	 * @returns 无返回值
	 */
	function AI_SZR_create(options = {}) {
		console.log('1231231231231231212312312', that.AI_SZR)
		let $script = $("#AI-shuziren");
		let deviceId = $script.attr("data-deviceId") || "";
		let baseUrl = $script.attr("data-baseUrl") || "";
		let socketUrl = $script.attr("data-socketUrl") || "wss://eval.saizhuge.net";
		if (!window.SZR) {
			return layer.msg("请先安装AI赛诸葛插件");
		}
		let autoShow = options.autoShow !== undefined ? options.autoShow : true;
		let wxConfig = options.wxConfig || "";
		that.AI_SZR_ws_host = socketUrl;
		that.AI_SZR_device_id =
			options.deviceId || getQueryletiable("deviceId") || deviceId || that.pc_code;
		if (!that.AI_SZR) {
			//没实例，初始化
			let initOptions = {
				width: "100%",
				height: "100%",
				containner: that.SZR_class_,
				autoShow: true,
				pcMemberId: that.user_info.member_id,
				pcUserId: that.user_info.user_id || "",
				pcMobile: that.user_info.full_mobile || "",
				pcCode: that.pc_code,
				deviceId: that.AI_SZR_device_id,
				socketUrl: socketUrl,
				baseUrl: baseUrl || location.origin,
				wxConfig,
				isShareH5: true,
				showBackground: true,
				showRecorderBtn: false, //显示录音按钮
				// baseUrl: 'https://yufabu.saizhuge.net',
				onCreated(insstance) {
					console.log("初始化成功", insstance);
					if (that.AI_SZR) {
						that.AI_SZR.initSuccess = true;
					}
				},
				onMessage(payload) {
					console.log("收到消息", payload);
					console.log(that);
					const conversationStore = useConversationStore();


					let {
						type,
						detail
					} = payload;

					if (type == "SZR_H5_MESSAGE") {
						console.log('this.currentId', this.currentId, that.currentId)
						conversationStore.addAiResponse(detail.message, that.currentid);
					}
					if (type == "SZR_H5_PLAY") {
						switch (detail.action) {
							case "play-end":
								break;
							case "pause-end":
								break;
							case "stop-end":
								break;
						}
					} else if (type == "SZR_SHOW") {
						console.log("显示了");
					} else if (type == "SZR_HIDE") {
						console.log("隐藏了");
					} else if (type == "SZR_H5_MESSAGE") {
						//同步对话
					} else if (type == "SZR_H5") {
						//直接执行指令
						serial_splitInstruct(detail);
					}
				},
			};
			// 默认数字人
			if (that.user_info.shuziren_id) {
				initOptions.defaultShuziren = {
					shuziren_id: that.user_info.shuziren_id || "",
					voice_id: that.user_info.voice_id || "",
					language_id: that.user_info.language_id || "",
				};
			}

			// 初始化
			console.log("创建数字人", initOptions);
			that.AI_SZR = SZR.create(initOptions);
		}
	}

	function getQueryletiable(letiable) {
		let query = window.location.search.substring(1);
		let lets = query.split("&");
		for (let i = 0; i < lets.length; i++) {
			let pair = lets[i].split("=");
			if (pair[0] == letiable) {
				return pair[1];
			}
		}
		return false;
	}

	/**
		 * 独立数字人演讲ppt	/ 发送消息 / 通知数字人
		 * @param type 类型，可选值为
		 *  默认为 H5_SZR_PLAY : 操作播放- 播放/暂停
		 * 	H5_SZR_SHOW : 显示数字人
		 * 	H5_SZR_HIDE : 隐藏数字人
		 * 	H5_SZR_INSTRUCT : 直接发送指令
		 * 	H5_SZR_MODULE : 通知app事件/socket通讯事件
		 * 	H5_SZR_JUST_CHANGE : 仅改变数字人形象、音色、语音等
		 * detail: { 
		      action: '',   // action操作类型
		      msg:'',       // msg操作信息
		      item:{        // item数字人形象、音色、语言、背景
		        dataType:'',  // dataType数字人szr、音色voice、语言lang、背景bg
		      }, 
		      ...detail     //其他信息
		    }
		 * @param detail 详细信息，包括action和msg等属性，默认为空对象
		 */
	function AI_shuziren_send_ppt(type, detail = {}) {
		let params = {
			type: type || "",
			detail: {
				...detail, //其他信息
			},
		};
		console.log("通知数字人:", params);
		console.log(detail);
		// 通知数字人播放当前视频等事件
		if (that.AI_SZR) {
			that.AI_SZR.postMessage(params);
		} else {
			setTimeout(() => {
				AI_shuziren_send_ppt(type, detail);
			}, 500);
		}
	}
	import {
		useConversationStore
	} from "../store";
	export default {
		props: {
			SZR_class: {
				type: String
			}
		},
		name: "szr",




		data() {
			return {
				currentId: 0,
				AI_SZR: null,
				AI_SZR_ws_host: null,
				AI_SZR_scaleType: "",
				pc_code: new Date().getTime(),
				AI_SZR_device_id: "",
				windowClicked: false,
				SZR_class_: '',
				user_info: {
					member_id: getQueryletiable("member_id") || "10568",
					full_mobile: "17838185566",
					user_id: getQueryletiable("user_id") || "",
					shuziren_id: getQueryletiable("shuziren_id") || "168",
				}
			};
		},
		beforeCreate() {
			localStorage.removeItem('zb_shuziren_app____s_zr_')
		},
		created() {

			that = this;
			window.document.addEventListener("click", () => {
				that.windowClicked = true;
			});
			that.SZR_class_ = '.' + this.SZR_class
			console.log('this.SZR_class', this.SZR_class)

		},
		mounted() {
			setTimeout(() => {
				AI_SZR_create();
			}, 1000)
			console.log('-----------', that.AI_SZR)
			this.$eventBus.$on('sendMessage', (data) => {
				this.currentid = data.id
				console.log('data----------', data)
				AI_shuziren_send_ppt('H5_SZR_STOP_VOICE')
				that.AI_SZR.postMessage({
					type: 'H5_SZR_STOP_VOICE'
				})
				AI_shuziren_send_ppt(data.type, data.detail)
			})

		},
		methods: {
			// postMessageToApp(data) {
			// 	parent.postMessage(data, '*')
			// }
		},
	};
</script>

<style>
	.miniSZR {
		position: relative;
		display: flex;
		width: 200px !important;
		height: 250px !important;
		align-items: center;
		padding-top: 40px;
	}

	:deep(.miniSZR .shuziren-page) {
		min-width: 200px !important;
		min-height: 200px !important;
	}

	.miniSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 200px !important;
		height: 300px !important;
		align-items: center;
		padding-top: 40px;
	}

	:deep(.voiceSZR) {
		position: relative;
		display: flex;
		width: 100% !important;
		height: 90vh !important;
		align-items: center;
		padding-top: 40px;
	}

	:deep(.advermachineSZR) {
		position: relative;
		display: flex;
		width: 100% !important;
		height: 100% !important;
		align-items: center;
		padding-top: 40px;
	}

	.advermachineSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 100% !important;
		height: 100% !important;
		align-items: center;
		padding-top: 40px;
	}

	:deep(.miniSZR .szg-szr-box .shuziren-page) {
		min-width: 200px !important;
		min-height: 200px !important;
	}

	:deep(.voiceSZR .szg-szr-box .shuziren-page) {
		min-width: 400px !important;
		min-height: 400px !important;
	}

	.szg-szr-box .shuziren-page {
		min-width: 120px !important;
		min-height: 120px !important;
	}

	:deep(.chatbgvS) {
		font-size: 14px !important;
	}

	:deep(.shuziren-chat.is-share-h5 .chatother .bubble) {
		background: rgba(0, 0, 0, .3) !important;
		border: 1px solid #fff !important;
		padding: 12px !important;
		font-size: 14px !important;
	}
</style>